<template>
  <div class="app-container">
    <div class="permission" v-loading="loading">
      <div class="department-list">
        <div class="line">部门信息</div>
        <el-input
          v-model="bumenSearchInput"
          clearable
          placeholder="请输入内容"
        />
        <el-tree
          class="bumenTree"
          ref="bumenTree"
          :data="allDepartment"
          show-checkbox
          node-key="value"
          :check-strictly="true"
          :filter-node-method="filterNode"
          @check="handleCheckedBumenAndUser"
        ></el-tree>
      </div>
      <div class="system-lsit">
        <System
          :systemVisibleData="systemVisible"
          :systemInvisibleData="systemInvisible"
          :department_id="department_id"
          v-model:loading="loading"
          @updateData="appBTypeAndId"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getAppConfList } from '@/api/systemList';
import { getAppBTypeAndId } from '@/api/permissionSetting';
import System from './components/system.vue';
import { watch } from 'vue';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const allDepartment = userStore.allDepartment;
const bumenSearchInput = ref('');
const department_id = ref(null);
const bumenTree = ref(null);
const loading = ref(false);
const systemAllList = ref([]); //所有系统
const systemVisible = ref([]); //可见的系统
const systemInvisible = ref([]); //不可见的系统
watch(bumenSearchInput, (newValue, oldValue) => {
  bumenTree.value.filter(newValue);
});
// 字符转小写
function getToLowerCase(val) {
  if (val) return val.toLowerCase();
  else return '';
}
const filterNode = (value, data, node) => {
  if (!value) return true;
  // 顶层父级直接判断
  if (node.level === 1) {
    let label = getToLowerCase(data.label);
    return label.indexOf(getToLowerCase(value)) !== -1;
  }
  // level > 1 递归判断父级是否包含搜索项
  return deepFilter(value, node);
};
function deepFilter(value, node) {
  if (node.level > 0) {
    let label = getToLowerCase(node.data.label);
    if (label.indexOf(getToLowerCase(value)) !== -1) {
      return true;
    }
    return deepFilter(value, node.parent);
  }
  return false;
}
const handleCheckedBumenAndUser = data => {
  if (department_id.value === data?.value) {
    // 清空选中
    department_id.value = null;
    bumenTree.value.setCheckedKeys([]);
  } else {
    department_id.value = data?.value;
    bumenTree.value.setCheckedKeys([data?.value]);
  }
  if (department_id.value) appBTypeAndId();
  else {
    systemVisible.value = [];
    systemInvisible.value = [];
  }
};
// 根据部门可见系统列表
const appBTypeAndId = () => {
  const params = {
    type: 'department',
    id: department_id.value
  };
  loading.value = true;
  getAppBTypeAndId(params)
    .then(res => {
      loading.value = false;
      systemVisible.value = res.data;
      getSystemInvisible();
    })
    .finally(() => {
      loading.value = false;
    });
};
// 设置不可见系统
const getSystemInvisible = () => {
  // 在全部系统中过滤掉可见系统
  systemInvisible.value = systemAllList.value.filter(e => {
    let item = systemVisible.value?.find(val => e.id === val.id);
    if (!item) return e;
  });
};
// 查询所有系统列表
const appConfList = () => {
  const params = { page: 1, page_size: 1000 };
  getAppConfList(params)
    .then(res => {
      systemAllList.value = res.data.app_list;
    })
    .finally(() => {});
};
onMounted(() => {
  appConfList();
});
</script>

<style lang="scss" scoped>
.permission {
  background: #fff;
  height: 100%;
  border-radius: 4px;
  display: flex;
  .department-list {
    width: 350px;
    padding: 18px;
    border-right: 1px solid #dcdfe6;
    height: 100%;
    display: flex;
    flex-direction: column;
    .line {
      border-left: 1px solid #008080;
      padding-left: 6px;
      color: #606266;
      line-height: 20px;
      margin-bottom: 10px;
    }
    .bumenTree {
      flex: 1;
      margin-top: 10px;
      overflow: auto;
    }
  }
  .system-lsit {
    flex: 1;
    height: 100%;
  }
}
</style>
